Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Create Block] Adding a --no-plugin flag to scaffold only block files. #41642

Conversation

ryanwelcher
Copy link
Contributor

@ryanwelcher ryanwelcher commented Jun 9, 2022

What?

This PR introduces the --no-plugin flag to allow users to use the package to scaffold only block files.

Why?

Currently, there is no way to scaffold additional blocks once the plugin has been created. Being able to create subsequent blocks quickly would be very helpful.

How?

When the --no-plugin flag is added, the script skips any plugin scaffolding and only outputs the files listed in the blockTemplatesPath ( just the block files ) into folderName as defined by the template with the default being ./src. It should be noted that the script is not "aware" of its location. Calling npx @wordpress/create-block block-name --no-plugin will create a new block inside the folderNamedirectory where it's called

The slug passed is used as the directory and block name any other flags not related to package.json items should function as expected for the block, i.e namespace.

Testing Instructions

  1. From the root of packages/create-block, run node index.js test to create a new plugin with a single block
  2. cd into the test directory
  3. Run node ../index.js my-test-block --no-plugin to scaffold a new block
  4. Confirm that the src directory has the existing block files and a new directory called my-test-block that contains new block files
  5. Run npm start to confirm that the build works

Screenshots or screencast

@ryanwelcher ryanwelcher added [Tool] Create Block /packages/create-block Developer Experience Ideas about improving block and theme developer experience labels Jun 9, 2022
@ryanwelcher ryanwelcher marked this pull request as ready for review June 14, 2022 18:09
@ryanwelcher ryanwelcher requested a review from gziolo as a code owner June 14, 2022 18:09
@ryanwelcher
Copy link
Contributor Author

This PR introduces a lot of conditionals and it would be a really good idea to start abstracting out some of the functionality to make it easier to work with.

@ryanwelcher ryanwelcher changed the title Try/add per block scaffolding create block [Create Block] Adding a --block-only flag to scaffold only block files. Jun 14, 2022
Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR introduces the --block-only flag to allow users to use the package to scaffold only block files.

This is great. We really need this option to make it possible to scaffold more blocks for existing plugins ❤️

I left some comments from my testing. In general, this PR is nearly ready. It just requires some final decisions like:

  • Where to exactly output the block folder?
  • How to name the flag? It's probably too late to have npx @wordpress/create-block and npx @wordpress/create-block-plugin 😅 The only alternatives I can think of are --no-plugin or --skip-plugin which might be less clear.

packages/create-block/lib/output.js Outdated Show resolved Hide resolved
packages/create-block/lib/init-block.js Outdated Show resolved Hide resolved
Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything works great and I'm really excited about this new feature. I left my feedback for consideration. Let's also include an example with some details how it works in the README file.

packages/create-block/CHANGELOG.md Show resolved Hide resolved
packages/create-block/lib/scaffold.js Outdated Show resolved Hide resolved
packages/create-block/lib/init-block.js Outdated Show resolved Hide resolved
packages/create-block/lib/init-block.js Outdated Show resolved Hide resolved
@ryanwelcher
Copy link
Contributor Author

I found an issue while testing where if a --template was passed that didn't support the blockTemplatesPath property an assets directory was created containing the actual template files.

As a result, I have added some logic to check to see if there are block template files and if not, error out with a message.

This can be tested by using the following command from the root of the create-block package.

  1. Template with support: node ../index.js my-test-block ---template=@ryanwelcher/dynamic-block-template --no-plugin
  2. Template without support:node ../index.js my-test-block --template=@ryanwelcher/multiple-blocks-template --no-plugin

@ryanwelcher ryanwelcher changed the title [Create Block] Adding a --block-only flag to scaffold only block files. [Create Block] Adding a --no-plugin flag to scaffold only block files. Aug 11, 2022
@gziolo
Copy link
Member

gziolo commented Aug 12, 2022

I can confirm that the newly added check for block templates works as expected:

Screenshot 2022-08-12 at 09 46 31

It makes me wonder whether we should bail out early when loading the config for the template. In effect we would have two checks:

  • Show error when there is no blockTemplatesPath provided together with --no-plugin flag: The template selected doesn't support --no-plugin` option.
  • If both --no-plugin and the blockTemplatesPath was provided and there were no block files loaded, we could just show the message that No block files found in the template. The template "XYZ" is incorrectly configured.

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent work. I think it's ready feature-wise. There is only one remaining task left for the lodash support, which isn't a blocker but nice to have.

The other comment about handling edge cases is my just musing that you can ignore in the first iteration 😄

@gziolo
Copy link
Member

gziolo commented Aug 12, 2022

'The block slug used for identification (also the plugin and output folder name):',

here we could make it more universal for the time being so it fits also the case when user passes --no-plugin flag:

The block slug used for identification (also the output folder name):

In the long run, if we were to support multiple blocks scaffolding in one go, we might want to have two distinct slug prompts - one for the block and the other one for the plugin. I'm not sure about that yet, but I wanted to flag it.

@ryanwelcher
Copy link
Contributor Author

'The block slug used for identification (also the plugin and output folder name):',

here we could make it more universal for the time being so it fits also the case when user passes --no-plugin flag:

The block slug used for identification (also the output folder name):

I'll make this update before merging.

In the long run, if we were to support multiple blocks scaffolding in one go, we might want to have two distinct slug prompts - one for the block and the other one for the plugin. I'm not sure about that yet, but I wanted to flag it.

I LOVE this idea. It's been something that always bugged me that the plugin and the block had the same name. Being able to pass different names for the plugin would be really handy. I'll open a new issue for it.

@ryanwelcher
Copy link
Contributor Author

related #43235

@ryanwelcher ryanwelcher merged commit a175df3 into WordPress:trunk Aug 15, 2022
@github-actions github-actions bot added this to the Gutenberg 14.0 milestone Aug 15, 2022
@bph bph added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Sep 14, 2022
@bph bph mentioned this pull request Sep 14, 2022
89 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Developer Experience Ideas about improving block and theme developer experience Needs Dev Note Requires a developer note for a major WordPress release cycle [Tool] Create Block /packages/create-block
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants